<template>
	<div>
		<el-row>
			<el-col :span="12">
				<div ref="mybar" class="bar-wrap"></div>
			</el-col>
			<el-col :span="12">
				<div ref="chartBar" class="bar-wrap"></div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<div ref="chartLine" class="bar-wrap"></div>
			</el-col>
			<el-col :span="12">
				<div ref="myangar" class="bar-wrap"></div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import * as echarts from 'echarts'
import { RequestCategoryList } from '@/api/product'
export default {
	mounted() {
		this.onDrawBar()
		this.onDrawChartBar()
		this.drawLineChart()
		this.drawBarChart()
	},
	methods: {
		async onDrawBar() {
			const myChart = echarts.init(this.$refs.mybar) //初始化echart对象

			myChart.showLoading()
			let data = await RequestCategoryList()
			if (data.resultCode === 1) {
				myChart.hideLoading()
				let list = data.resultInfo.list.map(item => item.name)

				myChart.setOption({
					title: {
						text: '统计商品分类'
					},
					tooltip: {},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: list
					},
					yAxis: {},
					series: [
						{
							name: '销量',
							type: 'bar',
							data: [5, 20, 36, 10, 10, 20]
						}
					]
				})
			}
		},
		onDrawChartBar() {
			const myChart = echarts.init(this.$refs.chartBar) //初始化echart对象
			const option = {
				// backgroundColor: '#2c343c',
				title: {
					text: '访问统计',
					subtext: '纯属虚构',
					x: 'center'
				},
				series: [
					{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						data: [
							{ value: 235, name: '视频广告' },
							{ value: 274, name: '联盟广告' },
							{ value: 310, name: '邮件营销' },
							{ value: 335, name: '直接访问' },
							{ value: 400, name: '搜索引擎' }
						],
						roseType: 'angle'
					}
				]
			}
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option)
		},
		drawLineChart() {
			let chartLine = echarts.init(this.$refs.chartLine)
			chartLine.setOption({
				title: {
					text: '营销数据'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['邮件营销', '联盟广告', '搜索引擎']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: [
						'周一',
						'周二',
						'周三',
						'周四',
						'周五',
						'周六',
						'周日'
					]
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '邮件营销',
						type: 'line',
						stack: '总量',
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '联盟广告',
						type: 'line',
						stack: '总量',
						data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
						name: '搜索引擎',
						type: 'line',
						stack: '总量',
						data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
			})
		},
		drawBarChart() {
			let chartBar = echarts.init(this.$refs.myangar)
			chartBar.setOption({
				title: {
					text: '人口统计',
					subtext: '数据来自网络'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					data: ['2011年', '2012年']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: [
						'巴西',
						'印尼',
						'美国',
						'印度',
						'中国',
						'世界人口(万)'
					]
				},
				series: [
					{
						name: '2011年',
						type: 'bar',
						data: [18203, 23489, 29034, 104970, 131744, 630230]
					},
					{
						name: '2012年',
						type: 'bar',
						data: [19325, 23438, 31000, 121594, 134141, 681807]
					}
				]
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.bar-wrap {
	height: 380px;
	width: 580px;
}
</style>